import React, { useMemo } from 'react';

import { BaseTable, utils, RenderValue, HeadHighlight } from '@/components/BaseTable';
import { InputNumber } from 'antd';
import _ from 'lodash';

// 本次调价对整盘核心指标的影响
const IndicatorImpact = ({
  data,
  isEdit,
  handleChange,
  loading,
  showExport,
  onClickExportExcel,
}) => {
  const titleTree = useMemo(
    () => [
      {
        key: 'name',
        name: '整盘指标名称',
        colspan: 1,
        rowspan: 1,
        frozen: 'left',
      },
      {
        name: '利润率变动预警',
        key: 'profit',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('投资版')}>投资版</HeadHighlight>
        ),
        key: 'investment',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('战规版')}>战规版</HeadHighlight>
        ),
        key: 'strategy',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('集团审批版')}>
            集团审批版
          </HeadHighlight>
        ),
        key: 'president',
        colspan: 1,
        rowspan: 1,
      },
      // {
      //   name: <HeadHighlight isHighlight={contrastType === 'check'}>年初考核版</HeadHighlight>,
      //   key: 'check',
      //   colspan: 1,
      //   rowspan: 1,
      // },
      {
        name: '调整前',
        key: 'before',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: <HeadHighlight isHighlight>调整后</HeadHighlight>,
        key: 'after',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('投资版')}>
            调整后-投资版
          </HeadHighlight>
        ),
        key: 'afterInvestment',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('战规版')}>
            调整后-战规版
          </HeadHighlight>
        ),
        key: 'afterStrategy',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: (
          <HeadHighlight isHighlight={data?.marsVersions?.includes('集团审批版')}>
            调整后-集团审批版
          </HeadHighlight>
        ),
        key: 'afterPresident',
        colspan: 1,
        rowspan: 1,
      },
      {
        name: '调整后-调整前',
        key: 'afterBfore',
        colspan: 1,
        rowspan: 1,
      },
      // {
      //   name: <HeadHighlight isHighlight={contrastType === 'check'}>调整后-年初考核版</HeadHighlight>,
      //   key: 'afterCheck',
      //   colspan: 1,
      //   rowspan: 1,
      // },
    ],
    [data.marsVersions],
  );
  const fixedColumns = useMemo(
    () => [
      {
        key: 'name',
        dataKey: 'name',
        width: 165,
        align: 'left',
        frozen: 'left',
      },
      {
        key: 'profit',
        dataKey: 'profit',
        width: 100,
        align: 'right',
        dataGetter: ({ rowData }) => ({
          text: rowData.profit,
          valueType: 'percentDiff',
          precision: 2,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'investment',
        dataKey: 'investment',
        width: 120,
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => {
          const obj = {
            text: rowData.investment,
            valueType: 'money',
            precision: rowIndex > 2 ? 2 : 0,
          };
          if (rowIndex === 3 || rowIndex === 4) {
            obj.text = rowData.investment;
            obj.valueType = 'percent';
          }
          return obj;
        },
        cellRenderer: rowProps => {
          if (isEdit) {
            return (
              <InputNumber
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                precision={rowProps.rowIndex > 2 ? 2 : 0}
                style={{ width: '100%' }}
                onChange={value => handleChange(value, rowProps)}
                value={rowProps?.rowData?.investment}
                disabled={rowProps?.rowData?.investmentIsEdit}
              />
            );
          }
          return <RenderValue {...rowProps} key={rowProps?.rowIndex} />;
        },
      },
      {
        key: 'strategy',
        dataKey: 'strategy',
        width: 120,
        title: 'sss',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => {
          const obj = {
            text: rowData.strategy,
            valueType: 'money',
            precision: rowIndex > 2 ? 2 : 0,
          };
          if (rowIndex === 3 || rowIndex === 4) {
            obj.text = rowData.strategy;
            obj.valueType = 'percent';
          }
          return obj;
        },
        cellRenderer: rowProps => {
          if (isEdit) {
            return (
              <InputNumber
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                precision={rowProps.rowIndex > 2 ? 2 : 0}
                style={{ width: '100%' }}
                onChange={value => handleChange(value, rowProps)}
                value={rowProps?.rowData?.strategy}
                disabled={rowProps?.rowData?.strategyIsEdit}
              />
            );
          }
          return <RenderValue {...rowProps} key={rowProps?.rowIndex} />;
        },
      },
      {
        key: 'president',
        dataKey: 'president',
        width: 120,
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => {
          const obj = {
            text: rowData.president,
            valueType: 'money',
            precision: rowIndex > 2 ? 2 : 0,
          };
          if (rowIndex === 3 || rowIndex === 4) {
            obj.text = rowData.president;
            obj.valueType = 'percent';
          }
          return obj;
        },
        cellRenderer: rowProps => {
          if (isEdit) {
            return (
              <InputNumber
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                precision={rowProps.rowIndex > 2 ? 2 : 0}
                style={{ width: '100%' }}
                onChange={value => handleChange(value, rowProps)}
                value={rowProps?.rowData?.president}
                disabled={rowProps?.rowData?.presidentIsEdit}
                placeholder="-"
              />
            );
          }
          return <RenderValue {...rowProps} key={rowProps?.rowIndex} />;
        },
      },
      {
        key: 'before',
        dataKey: 'before',
        width: 120,
        title: '',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => {
          const obj = {
            text: rowData.before,
            valueType: 'money',
            precision: rowIndex > 2 ? 2 : 0,
          };
          if (rowIndex === 3 || rowIndex === 4) {
            obj.text = rowData.before;
            obj.valueType = 'percent';
          }
          return obj;
        },
        cellRenderer: rowProps => {
          if (isEdit) {
            return (
              <InputNumber
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                precision={rowProps.rowIndex > 2 ? 2 : 0}
                style={{ width: '100%' }}
                onChange={value => handleChange(value, rowProps)}
                value={rowProps?.rowData?.before}
                disabled={rowProps?.rowData?.beforeIsEdit}
              />
            );
          }
          return <RenderValue {...rowProps} key={rowProps?.rowIndex} />;
        },
      },
      {
        key: 'after',
        dataKey: 'after',
        width: 120,
        title: '调整后',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => {
          const obj = {
            text: rowData.after,
            valueType: 'money',
            precision: rowIndex > 2 ? 2 : 0,
          };
          if (rowIndex === 3 || rowIndex === 4) {
            obj.text = rowData.after;
            obj.valueType = 'percent';
          }
          return obj;
        },
        cellRenderer: rowProps => {
          if (isEdit) {
            return (
              <InputNumber
                formatter={value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, '')}
                parser={value => value.replace(/\$\s?|(,*)/g, '')}
                precision={rowProps.rowIndex > 2 ? 2 : 0}
                style={{ width: '100%' }}
                onChange={value => handleChange(value, rowProps)}
                value={rowProps?.rowData?.after}
                disabled={rowProps?.rowData?.afterIsEdit}
              />
            );
          }
          return <RenderValue {...rowProps} key={rowProps?.rowIndex} />;
        },
      },
      {
        key: 'afterInvestment',
        dataKey: 'afterInvestment',
        width: 120,
        title: '调价后-投资版',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => ({
          text: rowData.afterInvestment,
          valueType: rowIndex === 3 || rowIndex === 4 ? 'percentDiff' : 'positiveAndNegativeDiff',
          precision: rowIndex > 2 ? 2 : 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterStrategy',
        dataKey: 'afterStrategy',
        width: 120,
        title: '调价后-战规版',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => ({
          text: rowData.afterStrategy,
          valueType: rowIndex === 3 || rowIndex === 4 ? 'percentDiff' : 'positiveAndNegativeDiff',
          precision: rowIndex > 2 ? 2 : 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterPresident',
        dataKey: 'afterPresident',
        width: 120,
        title: '调整后-集团版',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => ({
          text: rowData.afterPresident,
          valueType: rowIndex === 3 || rowIndex === 4 ? 'percentDiff' : 'positiveAndNegativeDiff',
          precision: rowIndex > 2 ? 2 : 0,
        }),
        cellRenderer: <RenderValue />,
      },
      {
        key: 'afterBfore',
        dataKey: 'afterBfore',
        width: 120,
        title: '调整后-调整前',
        align: 'right',
        dataGetter: ({ rowData, rowIndex }) => {
          return {
            text: rowData.afterBefore,
            valueType: rowIndex === 3 || rowIndex === 4 ? 'percentDiff' : 'positiveAndNegativeDiff',
            precision: rowIndex > 2 ? 2 : 0,
          };
        },
        cellRenderer: <RenderValue />,
      },
    ],
    [],
  );
  if (_.isEmpty(data?.list)) return null;
  return (
    <div>
      <div className="sub-title">
        本次调价对整盘核心指标的影响
        {showExport ? <a onClick={onClickExportExcel}>导出</a> : null}
      </div>
      <BaseTable
        fixHeight={254}
        fixedColumns={fixedColumns}
        headerRenderer={utils.getHeaderRenderer(titleTree, 1)}
        treeData={data.list}
        headerHeight={[30]}
        rowRenderer={({ rowData, cells }) => {
          const col = cells;
          const cell = col[1];
          if (rowData.id === 0) {
            const style = {
              ...cell?.props?.style,
              backgroundColor: 'white',
              height: 6 * 36 - 1,
              alignSelf: 'flex-start',
              zIndex: 1,
            };
            col[1] = React.cloneElement(<div key="1">{cell}</div>, { style });
          }
          return col;
        }}
        loading={loading || false}
      />
    </div>
  );
};
export default React.memo(IndicatorImpact);
